<template>
  <div class="carUser">
    <!-- 用户管理 -->
    <split-pane :default-percent="20" split="vertical">
      <template slot="paneL">
        <div class="table">
          <div class="inner">
            <el-tree
              style="height: 100%;"
              :data="organization"
              :props="defaultProps"
              node-key="dptName"
              :expand-on-click-node="false"
              default-expand-all
              highlight-current
              @node-click="handleNodeClick"
              ref="tree"
            >
            </el-tree>
          </div>
        </div>
      </template>

      <template slot="paneR">
        <div class="table">
          <div class="inner" style="padding-left: 10px;" ref="inner">
            <div class="btn">
              <buttonName @clickEvent="clickEventDom"></buttonName>
              <!-- <el-button plain size="mini" type="primary" v-if="isAuth('add')" @click="add" >新增</el-button>
              <el-button plain size="mini" type="primary" v-if="isAuth('edit')" @click="edit">编辑</el-button>
              <el-button plain size="mini" type="primary" v-if="isAuth('del')" @click="cancelItem">删除</el-button>
              <el-button plain size="mini" type="primary" v-if="isAuth('reset')" @click="resetpwd">密码重置</el-button> -->
            </div>
            <el-table
              :height="tableHeight"
              :data="MainTableData"
              style="width: 100%;"
              border
              :header-cell-style="{ textAlign: 'center' }"
              highlight-current-row
              @row-click="rowClick"
              @row-dblclick="view"
            >
              <el-table-column type="index" :index="indexMethod" label=" " width="50" align="center"></el-table-column>
              <el-table-column prop="usrCode" label="账户代码" sortable show-overflow-tooltip></el-table-column>
              <el-table-column prop="usrName" label="账户名称" sortable show-overflow-tooltip></el-table-column>
              <el-table-column prop="dptName" label="部门" sortable show-overflow-tooltip></el-table-column>
              <el-table-column prop="roleName" label="角色" sortable show-overflow-tooltip></el-table-column>
              <el-table-column prop="usrCellphone" label="联系电话" sortable show-overflow-tooltip></el-table-column>
              <el-table-column prop="usrEmail" label="邮箱" sortable show-overflow-tooltip></el-table-column>
              <el-table-column prop="usrStatus" label="状态" align="center" sortable>
                <template slot-scope="scope">
                  <span>{{ STATUS[scope.row.usrStatus] }}</span>
                </template>
              </el-table-column>
            </el-table>

            <el-pagination
              ref="pagination"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="Pagination.currentPage"
              :page-sizes="Pagination.pageSizeList"
              :page-size="Pagination.PageSize"
              :layout="Pagination.layout"
              :total="Pagination.total"
            >
            </el-pagination>
          </div>
        </div>
      </template>
    </split-pane>

    <!--对话  -->
    <el-dialog
      width="700px"
      v-if="dialogFormVisible"
      v-el-drag-dialog
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :title="title"
      :visible.sync="dialogFormVisible"
      :destroy-on-close="true"
    >
      <v-dialog @cancel="cancel" @save="save" :dialogmode="title" :form="currentFltInfo" :departData="organization"></v-dialog>
    </el-dialog>
  </div>
</template>
<script>
import resizeMixin from '@/mixins/resize'
import paginationMixin from '@/mixins/pagination'
import isAuth from '@/mixins/buttonAuth'
import { queryBasUser, addBasUser, editBasUser, delBasUser, resetBasUserPassWord, getSDepartment } from '@/request/api'
import vDialog from './dialog'
import buttonName from '@/components/buttonName/button-name.vue'

// 用户状态
const STATUS = {
  Y: '可用',
  N: '不可用'
}

export default {
  name: 'router.userNews',
  mixins: [resizeMixin, paginationMixin, isAuth],
  components: { vDialog, buttonName },
  created() {
    this.resize = () => {
      this.tableHeight = this.$refs.inner.offsetHeight - 70
    }
  },
  mounted() {
    getSDepartment().then(res => {
      this.organization = res.data[0].dpts
    })
    this.getdata()
  },
  data() {
    return {
      STATUS,
      dialogFormVisible: false,
      currentRow: {},

      currentFltInfo: {},

      dptId: '',

      //对话框数据
      mode: true,
      title: '',
      //表格数据
      MainTableData: [],
      tableHeight: 0,
      //树结构
      organization: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    }
  },
  methods: {
    //调取父组件方法
    clickEventDom(item) {
      if (item.mdlCode === 'add') {
        this.add()
      } else if (item.mdlCode === 'edit') {
        this.edit()
      } else if (item.mdlCode === 'del') {
        this.cancelItem()
      } else if (item.mdlCode === 'reset') {
        this.resetpwd()
      }
    },
    //重置密码
    resetpwd() {
      // console.log(this.currentRow)
      var { uuid, version } = this.currentRow
      if (Object.keys(this.currentRow).length == 0) {
        this.$alert('请选择数据！', '提示', {
          confirmButtonText: '确定'
        })
        return
      } else {
        resetBasUserPassWord({ uuid, version }).then(res => {
          if (res.success == 1) {
            this.$alert('密码重置成功，重置密码为Abc12345', '提示', {
              confirmButtonText: '确定'
            })
            this.currentRow = ''
          } else {
            this.$alert('密码重置失败！请稍后再试', '提示', {
              confirmButtonText: '确定'
            })
            this.selectData = ''
          }
          this.getdata()
        })
      }
    },
    //获取指页定分列表
    getList(PageIndexs, PageSizes, updateTotal) {
      queryBasUser({
        dptId: this.dptId,
        PageIndexs,
        PageSizes
      }).then(res => {
        updateTotal(res.total)
        // console.log(res,146);
        this.MainTableData = res.data
      })
      this.currentRow = ''
    },
    view(row) {
      this.title = this.DIALOG_MODE.VIEW
      this.currentFltInfo = Object.assign({}, row)
      this.currentFltInfo.usrRles && (this.currentFltInfo.usrRles = this.currentFltInfo.usrRles.split(','))
      this.currentFltInfo.usrDpts && (this.currentFltInfo.usrDpts = this.currentFltInfo.usrDpts.split(','))
      this.dialogFormVisible = true
    },
    //保存
    save(data) {
      switch (this.title) {
      case this.DIALOG_MODE.ADD:
        this.handleAdd(data)
        break
      case this.DIALOG_MODE.EDIT:
        this.handleEdit(data)
        break
      }
    },
    handleEdit(data) {
      editBasUser(data).then(() => {
        this.$message({
          message: '编辑成功!',
          type: 'success'
        })
        this.dialogFormVisible = false
        this.getdata()
      })
    },
    handleAdd(data) {
      addBasUser(data).then(res => {
        if (res.success == 1) {
          this.$message({
            message: '添加成功!',
            type: 'success'
          })
          this.dialogFormVisible = false
          this.getdata()
        } else {
          this.$message({
            message: '添加失败，请稍后重试',
            type: 'warning'
          })
        }
      })
    },
    //关闭对话框
    cancel() {
      this.dialogFormVisible = false
      this.getdata()
    },
    //选中行
    rowClick(row) {
      this.currentRow = row
    },
    //删除
    cancelItem() {
      if (Object.keys(this.currentRow).length == 0) {
        this.$alert('请选择需要删除的数据！', '提示', {
          confirmButtonText: '确定'
        })
        return
      }
      this.$confirm('您确认要删除选定的数据吗?', '提示', {
        closeOnClickModal: false
      }).then(() => {
        delBasUser(this.currentRow).then(() => {
          this.$message({
            message: '删除成功！',
            type: 'success',
            showClose: true
          })
          this.getdata()
        })
      })
    },
    // 编辑
    edit() {
      if (Object.keys(this.currentRow).length == 0) {
        this.$alert('请选择需要编辑的数据！', '提示', {
          confirmButtonText: '确定'
        })
        return
      }
      this.title = this.DIALOG_MODE.EDIT
      this.currentFltInfo = Object.assign({}, this.currentRow)
      this.currentFltInfo.usrRles && (this.currentFltInfo.usrRles = this.currentFltInfo.usrRles.split(','))
      this.currentFltInfo.usrDpts && (this.currentFltInfo.usrDpts = this.currentFltInfo.usrDpts.split(','))
      this.dialogFormVisible = true
    },
    //添加
    add() {
      this.currentFltInfo = {
        usrRles: [],
        usrDpts: [],
        dptName: '',
        usrCode: '',
        usrName: '',
        usrPassword: '',
        reusrPassword: '',
        usrCellphone: '',
        usrEmail: '',
        usrStatus: '',
        remark: ''
      }
      this.title = this.DIALOG_MODE.ADD
      this.dialogFormVisible = true
    },
    //获取数据
    getdata() {
      this.getList(this.Pagination.currentPage, this.Pagination.pageSize, this.updatePaginationTotal)
    },
    //树节点点击
    handleNodeClick(data) {
      this.dptId = data.id
      this.getdata()
    }
  }
}
</script>
<style lang="scss" scoped>
.carUser {
  padding: 1.5rem;
  height: 100%;
}
.btn {
  padding-left: 5px;
  padding-bottom: 5px;
}
.user {
  flex: 1;
  position: relative;
  box-sizing: border-box;
}
.block {
  padding-right: 15px;
  padding-bottom: 5px;
}
.table {
  flex: 1;
  position: relative;
  overflow: hidden;
  height: 100%;
  .inner {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
}
</style>
